<template>
  <div class="login_page fillcontain">
    <div class="login_title">
      后台管理系统
    </div>
    <div class="login_main">
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
        <el-form-item prop="username">
          <el-input v-model.trim="loginForm.username" placeholder="用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model.trim="loginForm.password" placeholder="密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="addForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '../api'
export default {
  name: 'Login',
  data() {
    return {
      // 表单数据
      loginForm: {
        username: '',
        password: ''
      },
      loginFormRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async addForm() {
      this.$refs.loginFormRef.validate(async valid => {
        if (valid) {
          const res = await login({ user_name: this.loginForm.username, password: this.loginForm.password })
          if (res.data.status !== 1) {
            return this.$message.error(res.data.message)
          } else {
            // 登录成功
            this.$router.push('/home')
            this.$message.success('登录成功')
          }
        } else {
          this.$message.error('请输入账号和密码')
        }
      })
    }
  }
}
</script>

<style lang="less">
.login_page {
  background-color: rgb(11, 44, 114);
  .login_title {
    height: 30px;
    display: flex;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    transform: translateY(120px);
  }
  .login_main {
    width: 400px;
    height: 280px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    .btn {
      width: 100%;
    }
  }
}
</style>
